<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <style type = "text/css">
        div,span,p{
            width:140px;
            height:140px;
            border:1px solid black;
            margin:5px;
            background:#aaa;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }

        div.mini{
            width:55px;
            height:55px;
            background:#aaa;
            font-size:12px;
        }

        div.hide{
            display:none;
        }
    </style>
    <script type ="text/javascript" src = "../jquery-1.7.2.js"></script>
    <script type = "text/javascript">

        $(function(){
            $("#btn1").click(function(){
                $("div[tittle]").css("background-color","#bbffaa");
            });

            $("#btn2").click(function(){
                $("div[tittle = 'test']").css("background-color","#bbffaa");
            });

            $("#btn3").click(function(){
                $("div[tittle !='test']").css("background-color","#bbffaa");
            });

            $("#btn4").click(function(){
                $("div[tittle ^='te']").css("background-color","#bbffaa");
            });
            $("#btn5").click(function(){
                $("div[tittle$='st']").css("background-color","#bbffaa");
            });
            $("#btn6").click(function(){
                $("div[tittle *='es']").css("background-color","#bbffaa");
            });
            $("#btn7").click(function(){
                $("div[id][tittle*='es']").css("background-color","#bbffaa");
            });
            $("#btn8").click(function(){
                $("div[tittle][tittle!='test']").css("background-color","#bbffaa");
            });
        });
    </script>
</head>
<body>
<h2>基本过滤器</h2>
<input type="button" value="选取含有 属性title 的div元素." id="btn1" style = "display:none"/>
<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
<input type="button"
       value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
<input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
<input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
<input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
<input type="button"
       value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
       id="btn7" />
<input type="button"
       value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />
<br>

<div id ="one" class = "one">
    id为one，class为one的div
    <div class = "mini">class为mini</div>
</div>

<div id = "two" class = "one" tittle = "test">
    id为two，class为one，tittle为test的div
    <div class = "mini" tittle = "other">class为mini，tittle为other</div>
    <div class = "mini" tittle = "test">class为mini，tittle为test</div>
</div>
<div class = "one">
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini"></div>
</div>
<div class = "one">
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini" tittle = "tesst">class为mini，tittle为tesst</div>
</div>

<div style = "display:none" class = "none">display为none的div</div>

<div class = "hide">class为hide的div</div>

<div>
    包含input的type为hidde的div
    <input type ="hidden" size = "8"/>
</div>
<div id = "mover">正在执行的动画。。。</div>
</body>
</html>